// 基本信息
import DialogBox from "@/components/DialogBox";
import SelectDeptList from "@/components/Sansan/SelectDeptList";
import UploadImg from "@/components/Upload/Img.vue";
import { ElForm } from "element-plus";
import { defineComponent, PropType } from "vue";
import { GatewayType } from "@/api/interface/iot";
interface DeviceForm {
	[key: string]: any;
}
export default defineComponent({
	props: {
		detail: {
			type: Object as PropType<DeviceForm>,
			default() {
				return {};
			}
		}
	},
	emits: ["submit"],
	setup(props, { attrs, emit }) {
		type FormInstance = InstanceType<typeof ElForm>;
		const formRef = ref<FormInstance>();
		const formRule = reactive({
			productModel: [{ required: true, message: "请输入产品Code", trigger: "change" }]
		});

		if (!props.detail.deviceType) {
			props.detail.deviceType = GatewayType.Device;
		}
		const validData = () => {
			formRef.value?.validate(valid => {
				if (valid) {
					emit("submit");
				}
			});
		};
		onMounted(() => {
			//默认为软产品
			if (!props.detail.type) {
			}
		});
		return () => {
			return (
				<DialogBox
					{...attrs}
					onConfirm={() => {
						validData();
					}}
				>
					<div class="flex">
						<div class="w-52 pr-4">
							<UploadImg v-model:imageUrl={props.detail.img} file-size={3} emptyTips="请上传产品图片"></UploadImg>
						</div>
						<div class="flex-1">
							<el-form model={props.detail} ref={formRef} rules={formRule} label-width="100px">
								<el-form-item label="产品编码" prop="productModel">
									<el-input v-model={props.detail.productModel} disabled={props.detail.id ? true : false} />
								</el-form-item>
								<el-form-item label="产品名称" prop="name">
									<el-input v-model={props.detail.name} />
								</el-form-item>
								<el-form-item label="所属分组" prop="deptId">
									<SelectDeptList detail={props.detail} />
								</el-form-item>
								<el-form-item label="产品类型" prop="device">
									{/* <el-input v-model={props.detail.device} /> */}
									<el-radio-group v-model={props.detail.deviceType}>
										<el-radio-button label={GatewayType.Device}>设备</el-radio-button>
										<el-radio-button label={GatewayType.SoftGateway}>软网关</el-radio-button>
										<el-radio-button label={GatewayType.Gateway}>网关设备</el-radio-button>
									</el-radio-group>
								</el-form-item>
							</el-form>
						</div>
					</div>
				</DialogBox>
			);
		};
	}
});
